<template>
	<view class="sxran-im-search">
		<uni-easyinput @input='onInput' :styles='styles' class="sxran-im-search-easyinput uni-mt-5" suffixIcon="search" v-model="value" :placeholder="placeholder" @iconClick="iconClick"></uni-easyinput>
		<!-- <view class="slot-content" v-if="isPlus">
			<slot><sxran-im-icon  name='plus-circle' size="24"></sxran-im-icon></slot>
		</view> -->
	</view>
</template>

<script>
	export default {
		props:{
			isPlus: {
				type: Boolean,
				default: true
			},
			placeholder:{
				type: String,
				default: '搜索'
			}
		},
		data() {
			return {
				value: null,
				styles: {
					color: 'var(--uni-text-color)',
					backgroundColor: 'var(--uni-bg-color-content)',
					disableColor: 'var(--uni-text-color-disable)',
					borderColor: 'var(--uni-border-color)'
				}
			}
		},
		methods: {
			iconClick() {
				this.$emit('iconClick', this.value)
			},
			onInput(){
				//存在延迟需要拿到最新的值
				this.$nextTick(()=>{
					this.$emit('input', this.value)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.sxran-im-search {
		display: flex;
		align-items: center;
		padding: $uni-spacing-row-base $uni-spacing-row-lg;

		.sxran-im-search-easyinput {
			.uni-easyinput__content {
				background-color: var(--uni-bg-color-) !important;
				border-color: var(--uni-border-color) !important;
				color: var(--uni-text-color) !important;
			}

			.uni-input-placeholder {
				color: var(--uni-text-color-placeholder) !important;
			}
		}

		.slot-content {
			padding: $uni-spacing-row-sm;
			background-color: var(--uni-bg-color-content);
			border-radius: $uni-border-radius-base;
			margin: 0 0 0 $uni-spacing-row-base;
		}
	}
</style>